iT邦幫忙

2024 iThome 鐵人賽

DAY 28
0
JavaScript

歡迎參加我的原生JS畢業典禮系列 第 28

【Day27】.NET Core MVC & Vue—DI注入連線本機資料庫

  • 分享至 

  • xImage
  •  

參賽進入最尾聲了,剩下最後一個實戰任務!將會用我之前透過.net MVC開發的訂房網站為基礎進行!

這系列兩大重點:

  1. 實際操作本機資料庫
  2. 當Vue.js加入.NET Core MVC專案後,是如何改善透過jQuery處理前端畫面的程式碼

連線資料庫

假設我們已經在SQL建立了本機資料庫ud_room,裡面有包含房間資料檔訂房明細檔 …等。
https://ithelp.ithome.com.tw/upload/images/20241012/20169356r6CocAeJ3s.png
現在我們需要在.NET Core MVC專案中連線它(專案的建立請參考:在.NET Core MVC加入Vue—邁向前後端分離大師

安裝套件

  • Microsoft.EntityFrameworkCore.SqlServer
  • Microsoft.EntityFrameworkCore.Tools
    在專案上點選右鍵「管理NuGet套件」進入搜尋畫面後,個別下載上述兩個套件
    https://ithelp.ithome.com.tw/upload/images/20241012/20169356CFpcPiRyso.png
    https://ithelp.ithome.com.tw/upload/images/20241012/20169356apPD7kU6MM.png

產生模型物件

安裝完畢後,我們就要透過套件來幫我們直接在專案產生模型物件:
Step1. 開啟 「檢視/其他視窗/套件管理器主控台」
https://ithelp.ithome.com.tw/upload/images/20241012/201693561t1rWsH6xF.png
Step2. 使用Scaffold-DbContext工具輸入連線字串並產生模型

Scaffold-DbContext "Data Source=ServerName;Initial Catalog=資料庫名稱;User ID=.net Booking;Password=bookinguse;Trusted_Connection=True;TrustServerCertificate=True" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -UseDatabaseNames -NoPluralize

◎小提示:

  • -OutputDir Models指令,是指示將資料放置在Models資料夾之下
  • 想確保套件建立的資料表名稱完全與DB相符,可多下-UseDatabaseNames防止大小寫變換、-NoPluralize不自動加入複數指令
  • 建立完模型如果需要重新建立請加入-Force指令,可以進行資料覆蓋

設定資料庫物件依賴注入(DI)

上面我們透過DB First的方式把資料庫模型建立在專案中,接下來要來創建DI的模式把資料拿出來:
Step1. 先進入appsettings.json設定檔加入連線字串

//appsettings.json
  "ConnectionStrings": {
    "RoomDBContext": "Data Source=ServerName;Initial Catalog=資料庫名稱;User ID=.net Booking;Password=bookinguse;Trusted_Connection=True;TrustServerCertificate=True"
  }

Step2. 點開Program.cs設定DI注入的資料庫物件

//Program.cs
builder.Services.AddDbContext<ud_roomContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("RoomDBContext")));

用LinQ取出資料

建立好資料庫物件後,現在要實際把DB內容取出來:
Step1. 到HomeController下,建立一個全域私有變數,用來存放剛剛設定好的DI資料庫物件

//HomeController
 //宣告全域私有變數
 private readonly ud_roomContext ud_RoomContext;
 
 //建構子中指定物件
 public HomeController(ILogger<HomeController> logger, ud_roomContext ud_Room)
{
    _logger = logger;
    ud_RoomContext = ud_Room;
}

▲這樣我們就可以使用ud_RoomContext來從DB拿資料了
Step2. 在Index下測試取出第一筆資料的房間名稱

//HomeController
     public string? Index()
   {
       string? name = ud_RoomContext.ut_BS001.FirstOrDefault()?.BS01_03;
       return name;
   }

可以順利看到資料了:
https://ithelp.ithome.com.tw/upload/images/20241013/201693566OZpuZkAFj.png

小結

今天其實提到了非常多的技術和觀念,但沒辦法逐一探討,主要還是要看後續Vue是如何協助我們把前端開發的效率提升!


參考資料
Entity Framework Core 工具參考
在 ASP.NET Core MVC 應用程式中使用資料庫
凱哥寫程式


上一篇
【Day26】為了前端而生—Web Compiler套件
下一篇
【Day28】.NET Core MVC & Vue—Bootstrap套件也能v-for!
系列文
歡迎參加我的原生JS畢業典禮31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言